<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="movie-header">
                    <span>热映电影</span>
                    <span>看影片 / 找影院 / 看票房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="all">查看全部 <span class="iconfont">&#xe625;</span></span></span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <ul>
                    <li v-for="(item,index) of list" :key="index">
                        <img :src="item.src" >
                        <span>{{item.name}}</span>
                        <span>{{item.content}}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'HomeMovie',
    data() {
        return {
            list: [{src: '//gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/242dd42a2834349bc68bdaa5c7ea15ce36d3be05.jpg',
            name: '惊奇队长',
            content: '选座购票'},
            {src: '//gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/e4dde71190ef76c698c4f1ce9016fdfaae5167c4.jpg',
            name: '绿皮书',
            content: '选座购票'},
            {src: '//gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/2934349b033b5bb5629b88ed38d3d539b600bc51.jpg',
            name: '我的英雄学院：两位英雄',
            content: '选座购票'},
            {src: '//gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/0823dd54564e925869066dca9282d158ccbf4ee0.jpg',
            name: '比悲伤更悲伤的故事',
            content: '选座购票'},
            {src: '//gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/91529822720e0cf3020d26d90446f21fbe09aa1e.jpg',
            name: '夏目友人帐',
            content: '选座购票'},
            {src: '//gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/movie/pic/item/4610b912c8fcc3cecbc848189c45d688d43f2094.jpg',
            name: '阳台上',
            content: '选座购票'}]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .movie-header
        display: flex;
        justify-content: space-between;
        span:nth-child(1)
            font-weight: 550;
            font-size: 20px;
            margin-left: 143px;
            margin-top: 36px
        span:nth-child(2)
            // margin-right: 30px;
            margin-top: 40px;
            font-size: 13px;
            &:hover
                cursor: pointer;
            .all
                margin-right: 150px;
                font-size: 14px;
                font-weight: normal;
                .iconfont
                    margin-left: 0;
                    color: #aaa;
                    position: relative;
                    top: 1px;
                    right: 3px;
                    font-size: 15px;
    ul
        width: 1260px;
        height: 400px;
        display: inline-block;
        margin-left: 98px;
        border-bottom: 1px solid #eee;
        li
            width: 180px;
            height: 360px;
            padding-top: 20px;
            padding-right: 10px;
            padding-left: 10px;
            display: inline-block;
            list-style-type: none;
            margin-right: 5px;
            &:hover
                box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
            img
                width: 180px;
                height: 265px;
                cursor: pointer;
            span:nth-child(2)
                width: 100%;
                hight: 54px;
                display: block;
                text-align: center;
                font-size: 17px;
                margin-top: 10px;
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            span:nth-child(3)
                width: 122px;
                height: 36px;
                display: block;
                margin: 10px auto;
                border: 1px solid #B08C4A;
                color: #B08C4A;
                text-align: center;
                line-height: 36px;
                cursor: pointer; 
                &:hover
                    background: #FFFFCC;
</style>


